<template>
    <ul class="toolbar">
        <li class="tool-item" v-if="showHome">
            <a href="//www.toutiao.com">
                <tt-icon type="house" size="16" color="#fff"></tt-icon>
            </a>
        </li>
        <li class="tool-item" @click="refresh" v-if="showRefresh">
            <a href="javascript:void(0);">
                <tt-icon type="refresh" size="16" color="#fff"></tt-icon>
            </a>
        </li>
        <li class="tool-item" @click="scrollToTop" v-if="reallyShowTop">
            <a href="javascript:void(0);">
                <tt-icon type="arrow_up_big" size="16" color="#fff"></tt-icon>
            </a>
        </li>
    </ul>
</template>

<style lang="less" scoped>
    @import "./toolbar.less";
</style>

<script>
  import { getScrollTop } from '../../../src/js/utils.js'
  import throttle from 'lodash/throttle'

  export default {
    name: "Toolbar",
    props: {
      showHome: {
        type: Boolean,
        default: false
      },
      showRefresh: {
        type: Boolean,
        default: false
      },
      showTop: {
        type: Boolean,
        default: true
      },
      refreshMethod: Function
    },
    data () {
      return {
        hasScrolled: false
      }
    },
    computed: {
      reallyShowTop: function () {
        return this.showTop && this.hasScrolled
      }
    },
    mounted () {
      var scrollTopNum = 0

      window.addEventListener('scroll', throttle(() => {
        scrollTopNum = getScrollTop(window) // 滚动高度

        if (scrollTopNum > 100) {
          this.hasScrolled = true
        } else {
          this.hasScrolled = false
        }
      }, 500), false)
    },
    methods: {
      scrollToTop () {
        window.scrollTo(0, 0);
      },
      refresh () {
        if (this.refreshMethod) {
          this.refreshMethod();
        }
      }
    }
  };
</script>



// WEBPACK FOOTER //
// toolbar.vue?3e9a16b5